{% block sw_select_rule_create %}
<div class="sw-select-rule-create">
    <sw-entity-multi-select
        v-if="rules !== null"
        v-bind="$attrs"
        v-model:entity-collection="collection"
        :criteria="ruleFilter"
        advanced-selection-component="sw-advanced-selection-rule"
        :advanced-selection-parameters="getAdvancedSelectionParameters()"
        @update:entity-collection="onUpdateCollection"
    >

        <template #before-item-list>
            {% block sw_select_rule_create_select_before %}
            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
            <div
                class="sw-select-rule-create__create-rule-item sw-select-result"
                @click="openCreateRuleModal"
            >
                {{ $tc('sw-select-rule-create.addNewRule') }}
            </div>
            {% endblock %}
        </template>

        <template #result-item="{ item, index, labelProperty, valueProperty, searchTerm, highlightSearchTerm, isSelected, addItem, getKey }">
            {% block sw_select_rule_create_select_multi_select_result_list_item %}
            <slot
                name="result-item"
                v-bind="{ item, index, labelProperty, valueProperty, searchTerm, highlightSearchTerm, isSelected, addItem, getKey }"
            >
                <sw-select-result
                    v-tooltip="tooltipConfig(item)"
                    :selected="isSelected(item)"
                    :disabled="isRuleRestricted(item)"
                    v-bind="{ item, index }"
                    @item-select="addItem"
                >
                    {% block sw_select_rule_create_select_multi_select_result_item_label %}
                    <slot
                        name="result-label-property"
                        v-bind="{ item, index, labelProperty, valueProperty, searchTerm, highlightSearchTerm, getKey }"
                    >
                        <sw-highlight-text
                            v-if="highlightSearchTerm"
                            :text="getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`)"
                            :search-term="searchTerm"
                        />
                        <template v-else>
                            {{ getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`) }}
                        </template>
                    </slot>
                    {% endblock %}
                </sw-select-result>
            </slot>
            {% endblock %}
        </template>

    </sw-entity-multi-select>

    {% block sw_select_rule_create_select %}
    <sw-entity-single-select
        v-else
        entity="rule"
        :criteria="ruleFilter"
        :value="ruleId"
        :size="size"
        v-bind="$attrs"
        show-clearable-button
        advanced-selection-component="sw-advanced-selection-rule"
        :advanced-selection-parameters="getAdvancedSelectionParameters()"
        @update:value="onSelectRule"
    >
        <template #before-item-list>
            {% block sw_select_rule_create_single_select_before %}
            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
            <div
                class="sw-select-rule-create__create-rule-item sw-select-result"
                @click="openCreateRuleModal"
            >
                {{ $tc('sw-select-rule-create.addNewRule') }}
            </div>
            {% endblock %}
        </template>
        <template #result-item="{ item, index, labelProperty, searchTerm, highlightSearchTerm, isSelected, setValue, getKey }">
            {% block sw_select_rule_create_select_entity_select_result_list_item %}
            <slot
                name="result-item"
                v-bind="{ item, index, labelProperty, searchTerm, highlightSearchTerm, isSelected, setValue, getKey }"
            >
                <sw-select-result
                    v-tooltip="tooltipConfig(item)"
                    :selected="isSelected(item)"
                    :disabled="isRuleRestricted(item)"
                    v-bind="{ item, index }"
                    @item-select="setValue"
                >
                    {% block sw_select_rule_create_select_entity_select_result_item_label %}
                    <slot
                        name="result-label-property"
                        v-bind="{ item, index, labelProperty, searchTerm, highlightSearchTerm, getKey }"
                    >
                        <sw-highlight-text
                            v-if="highlightSearchTerm"
                            :text="getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`)"
                            :search-term="searchTerm"
                        />
                        <template v-else>
                            {{ getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`) }}
                        </template>
                    </slot>
                    {% endblock %}
                </sw-select-result>
            </slot>
            {% endblock %}
        </template>
    </sw-entity-single-select>
    {% endblock %}

    {% block sw_select_rule_create_rule_modal %}
    <slot
        name="rule-modal"
        v-bind="{ showRuleModal, onSaveRule, onCloseRuleModal }"
    >
        {% block sw_select_rule_create_rule_modal_inner%}
        <sw-rule-modal
            v-if="showRuleModal"
            :rule-aware-group-key="ruleAwareGroupKey"
            @save="onSaveRule"
            @modal-close="onCloseRuleModal"
        />
        {% endblock %}
    </slot>
    {% endblock %}
</div>
{% endblock %}
